import React, {CSSProperties} from "react";
import {Input, Space as AntdSpace} from 'antd';
import {VJsonComponent} from "../../factory";
import {YvanEvent} from "../../types";
import {apply, convertCH, YvanEventBind, YvanEventDispatch} from "../../utils/helper";
import {FormItemBaseState, FormItemBaseProp, VJsonFormItemBase} from "./VJsonFormItemBase";
import * as Extend from "../../extend";
import {toJS} from "mobx";
import _ from "lodash";

const {TextArea: AntdTextArea} = Input;

export interface TextAreaVJsonProp extends FormItemBaseProp<TextArea> {
    autoSize?: boolean | object
    disabled?: boolean
    maxLength?: number
    autoTrim?: boolean,
    autoConvertCH?: boolean,
    onChange?: YvanEvent<TextArea>
    onInput?: YvanEvent<TextArea>
    onPressEnter?: YvanEvent<TextArea>
    allowClear?: boolean
    bordered?: boolean
    height?: number | string
    style?: CSSProperties
}

export interface TextAreaState extends TextAreaVJsonProp, FormItemBaseState<TextArea> {

}

@VJsonComponent({
    view: 'textarea'
})
export default class TextArea extends VJsonFormItemBase<TextArea, TextAreaVJsonProp, TextAreaState> {
    static defaultProps = {
        ...VJsonFormItemBase.defaultProps,
        allowClear: true,
        autoTrim: true,
        autoConvertCH: true,
    }

    lock = false

    constructor(props: any) {
        super(props, TextArea.defaultProps);
    }

    // protected onValueChange(this: any, e: any) {
    //     this.value = e.target.value
    //     YvanEventDispatch(this.props.vjson.onChange, this, e)
    // }

    protected onValueChange(newValue: any) {
        // newValue = convertCH(newValue)
        // newValue = _.trim(newValue)
        this.value = newValue
        YvanEventDispatch(this.props.vjson.onChange, this, newValue)
        // this.value = newValue
    }

    normalizeToEntity(newValue: any) {
        if (this.props.vjson.autoConvertCH) {
            newValue = convertCH(newValue)
        }
        if (this.props.vjson.autoTrim) {
            newValue = _.trim(newValue)
        }
        return newValue
    }

    handleComposition(evt) {
        if (evt.type === 'compositionstart') {
            this.lock = true
            return
        }

        if (evt.type === 'compositionend') {
            this.lock = false
        }

        if (!this.lock) {
            this._setValue(evt.target.value)
        }
    }

    _setValue = _.debounce(this.onValueChange, 100)

    protected renderWrapper(): JSX.Element {
        if (Extend.isDebugMode()) {
            console.log('RenderTextArea ', this.toString())
        }

        return (
            //@ts-ignore
            <AntdTextArea key={this.key} view_id={this.key} aria-roledescription={this.view}
                          style={{...toJS(this.props.vjson.style), height: this.props.vjson.height}}
                          autoSize={apply(this, this.props.vjson.autoSize)}
                          maxLength={apply(this, this.props.vjson.maxLength)}
                          bordered={apply(this, this.props.vjson.bordered)}

                          disabled={apply(this, this.props.vjson.disabled)}
                          allowClear={apply(this, this.props.vjson.allowClear)}

                // onChange={this.onValueChange.bind(this)}
                          onChange={this.handleComposition.bind(this)}
                          onCompositionStart={this.handleComposition.bind(this)}
                          onCompositionEnd={this.handleComposition.bind(this)}

                          onInput={YvanEventBind(this.props.vjson.onInput, this)}
                          onPressEnter={YvanEventBind(this.props.vjson.onPressEnter, this)}
            />
        )
    }
}
